<template>
	<view class="container">
		<view class="top">
			<view class="navigate">
				<view class="date-picker">

					<picker mode="date" :value="date" fields="month"
						@change="bindDateChange">
					
						<view class="picker-year">
{{selYear}}
							<image src="/static/icon/down_icon.png" mode="widthFix" class="down"></image>
						</view>
					</picker>

				</view>
				<view class="filter" @click="filterEvent">
					<text>筛选</text>
					<image src="/static/icon/filter_icon.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="box">
				<view class="box-item">
					<image src="../../static/icon/success_icon.png" mode="widthFix"></image>
					<view class="">
						成功
					</view>
					<view class="money">
						<text class="unit">￥</text>{{orderItem.successAmount}}
					</view>
					<view class="slash">
						/
					</view>
					<view class="">
						<text class="num">{{orderItem.successCount}}</text>笔
					</view>
				</view>
				<view class="box-item">
					<image src="../../static/icon/fail_icon.png" mode="widthFix"></image>
					<view class="">
						失败
					</view>
					<view class="money">
						<text class="unit">￥</text>{{orderItem.failAmount}}
					</view>
					<view class="slash">
						/
					</view>
					<view class="">
						<text class="num">{{orderItem.failCount}}</text>笔
					</view>
				</view>

			</view>
		</view>
		<!-- 列表 -->
		<view class="listBox">
			<view class="tab-header">
				<!-- 选项卡头部 -->
				<view class="tab-item" :class="{ active: activeTab === 'tab1' }" @click="changeTab('tab1')">
					成功
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'tab2' }" @click="changeTab('tab2')">
					失败
				</view>
			</view>
			<scroll-view class="list-wrapper" scroll-y="true" :refresher-enabled="true"
				:refresher-triggered="isRefreshing" @refresherrefresh="refresh" @scrolltolower="loadMore"
				v-if="listData.length > 0">
				<view class="card-wrapper" v-for="(item, index) in listData" :key="index" @click="onItemClick(item)">
					<view class="left">
						<view class="dateBox">
							{{ item.transTime}}
						</view>
						<view class="detail">
							<view class="">
								详情
							</view>
							<image src="/static/icon/right.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="item">

						<view class="moneyNum"><text class="unit">￥</text>{{ item.transAmount }}
						</view>
						<text class="success" v-if="activeTab=='tab1'">成功
						</text>
						<text class="fail" v-else>失败
						</text>
					</view>


				</view>
			</scroll-view>
			<view class="empty" v-else>
				<view class="">
					<image src="/static/icon/settle_no.png" mode="widthFix"></image>
				</view>
				<view class="">
					暂无数据
				</view>
			</view>
		</view>
		<!--筛选弹框-->
		<uni-popup ref="alertDialog" type="top" background-color="#fff" borderRadius="0rpx 0rpx 20rpx 20rpx">
			<view class="popup-content">
				<view class="popupItem">
					<view class="title">
						支付方式
					</view>
					<view class="button-wrapper">
						<view v-for="(item, index) in buttons" :key="index" class="button"
							:class="{ checked: item.checked }" @click="itemChecked(item)">
							<image :src="item.icon" mode="widthFix"></image> 
							<view class="">{{ item.label }}</view>
						</view>
					</view>
					<view class="buttonBox">
						<view @click="reset" class="button button-reset">重置</view>
						<view @click="confirm" class="button button-confirm">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from "vue";
	import {
		showToast
	} from "@/utils/toast";
	import moment from "moment";
	import {

		getMonth,
		getAfterMonth
	} from "@/utils/date";
	import {
		orderByTimeQuery
	} from "@/api/common.js";
	import useList from "@/hook/useList";
	import {
		useStore
	} from "@/store";
	import {
		concat
	} from 'lodash'
	/** store实例 */
	const store = useStore();

	let queryParams = ref({
		page: 1,
		size: 15,
		oemUserNo: 'BU100002',
		userId: store.userInfo.userId,
		startTime: "",
		endTime: "",
		payType: ""

	});
	const selMonth = ref(getMonth(new Date()))
	const selYear = ref(null)
	const startMonth = ref(null)
	const endMonth = ref(null)
	const listData = ref([])
	const isRefreshing = ref(false)
	let total = ref(0)
	let isNoMoreData = ref(false)
	const orderItem = ref({})
	const activeTab = ref("tab1")
const buttons=ref([
	{
		label:"刷卡支付",
		payType:"POS",
		icon:"/static/icon/card_icon.png",
		checked:false
	},{
		label:"云闪付",
		payType:"MOBILE_PAY",
		icon:"/static/icon/ysf_icon.png",
		checked:false
	},{
		label:"微信",
		payType:"WX",
		icon:"/static/icon/wx_icon.png",
		checked:false
	},{
		label:"支付宝",
		payType:"ZFB",
		icon:"/static/icon/alipay_icon.png",
		checked:false
	},{
		label:"银联二维码",
		payType:"YL_CODE_LESS",
		icon:"/static/icon/yl_2_icon.png",
		checked:false
	},
])
	onLoad((options) => {
		selYear.value = options.year;
		const parsedDate = new Date(selYear.value);
		// 检查日期是否有效
		if (!isNaN(parsedDate.getTime())) {
			// date.value = parsedDate;
			console.log("parsedDate=" + parsedDate)

			startMonth.value = parsedDate.getFullYear();
			endMonth.value = getAfterMonth(parsedDate, 1, "month");
			console.log("startMonth=" + startMonth.value)
			queryParams.value.startTime = selYear.value + "-01";
			queryParams.value.endTime = endMonth.value + "-01";

		} else {
			date.value = null;
			alert('Invalid date string');
		}

		getOrderList();
	});

	onShow(() => {

	});
	// 创建响应式数据  
	const alertDialog = ref();
	// 报表查询条件

	// 输入框内容
	let keyword = ref(null);
	
	function bindDateChange(e) { //选择日期
			console.log('date', e.detail.value)
		selYear.value = e.detail.value

		queryParams.value.startTime = selYear.value + "-01";
		const parsedDate = new Date(selYear.value);
		// 检查日期是否有效
		if (!isNaN(parsedDate.getTime())) {
			queryParams.value.endTime = endMonth.value + "-01";
		
		} else {
			date.value = null;
			alert('Invalid date string');
		}
		
		refresh();
	}
	function changeTab(tab) {
		activeTab.value = tab;
		refresh();
	}

	function filterEvent() {
		alertDialog.value.open()
		console.log("range", range)
	}
	// 选项被选中时
	function itemChecked(item) {

		// 多选
		item.checked = !item.checked;
		queryParams.value.payType = item.payType;
		console.log("queryParams", queryParams)
refresh();
	}

	function confirm() {
		alertDialog.value.close()
		refresh();
	}

	function onItemClick(item) {
		uni.navigateTo({
			url: "/pagesDetail/dealDetail/index?time=" + item.transTime,
		});
	}
	// 查询账户列表
	function getOrderList() {
		orderByTimeQuery(queryParams.value).then((res) => {

			if (activeTab.value == "tab1") {
				listData.value = concat(listData.value, res.successTransOrderVos);
			} else {
				listData.value = concat(listData.value, res.failtransOrderVos);
			}

			orderItem.value = res;
		});
	}

	function refresh() {
		// 重置相关数据
		isRefreshing.value = true;
		total.value = 0
		listData.value = []
		isNoMoreData.value = false
		queryParams.value.page = 1

		// 请求报表数据
		getOrderList()
	}

	// 加载下一页数据
	function loadMore() {
		if (isNoMoreData.value) {
			showToast('没有更多数据')
		} else {
			queryParams.value.page++
			getOrderList()
		}
	}
	// 日期改变事件
	const change = (val) => {
		console.log("val-val", val)
		queryParams.value.startTime = val[0];
		queryParams.value.endTime = val[1];
		refresh();
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>
<style lang="scss"></style>